import { useCallback, useState } from "react"

// 封装
export function useMyReducer<R extends (state: S, action: { type: any, payload: any }) => any, S>(reducer: R, initialState: S) {
  const [state, setState] = useState(reducer(initialState, {
    type: '',
    payload: ''
  }))

  const dispatch = useCallback((action: Parameters<typeof reducer>[1]) => {
    setState((state: S) => reducer(state, action))
  }, [reducer, setState])

  return [
    state,
    dispatch
  ]
}

/**
 * react 中的 hooks：
 * 1. useState
 * 2. useEffect useLayoutEffect
 * 3. useCallback
 * 4. useMemo
 * 5. useReducer
 * 6. memo
 * 7. createContext useContext
*/